<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="12" v-for="(item, index) in imgs" :key="index">
        <el-result :title="item.title" sub-title="注:点击下载后，可打印张贴在入口处">
          <template #icon>
            <qrcode-vue :class="item.url" :value="item.url" :size="110" level="H" />
          </template>
          <template #extra>
            <el-button type="primary" @click="downImg(item.url,item.title)">下载</el-button>
          </template>
        </el-result>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';
import QrcodeVue from 'qrcode.vue'
const { proxy } = useCurrentInstance()

const imgs = reactive([
  { url:'' as string,title:'钢安智管码（外来人员）' },
  { url:'' as string,title:'钢安智管码' },
])
proxy.$api.getCommonConfig().then(item => {
  if(item.code == 200){
    proxy.$api.getInformation().then(res => {
      imgs[0].url = item.result.register_code_url+`?company_id=${res.result.id}`
      imgs[1].url = item.result.inside_code_url+`?company_id=${res.result.id}`
    })
  }
})
const downImg = (url:string, title:string) => {
  var canvasData = document.getElementsByClassName(url)
  var a = document.createElement("a");
  a.href = canvasData[0].toDataURL();;
  a.download = title;
  a.click();
  proxy.$message({
    type:"success",
    message:title+'下载完成'
  })
}
</script>
